Popisky formulářů: Základní požadavky na přístupnost vstupních polí

Formuláře jsou základní součástí webu. Od jednoduchých kontaktních formulářů po složité procesy placení v e-shopech umožňují uživatelům interakci s webovými stránkami a aplikacemi. Špatně navržené formuláře však mohou vytvářet značné bariéry pro uživatele se zdravotním postižením. Klíčovým prvkem při vytváření přístupných formulářů je správné používání popisků. Tento průvodce poskytuje komplexní přehled požadavků na přístupnost popisků formulářů, aby vaše formuláře mohl používat každý bez ohledu na své schopnosti.

Proč jsou přístupné popisky formulářů důležité?

Přístupné popisky formulářů jsou zásadní z několika důvodů:

• Použitelnost: Jasné a stručné popisky pomáhají všem uživatelům pochopit účel každého vstupního pole, což zlepšuje celkovou použitelnost.
• Přístupnost: Popisky poskytují zásadní informace uživatelům se zdravotním postižením, zejména těm, kteří se spoléhají na asistivní technologie, jako jsou čtečky obrazovky. Bez řádných popisků nemusí být tito uživatelé schopni formuláře vyplnit.
• Soulad s WCAG: Web Content Accessibility Guidelines (WCAG) vyžadují, aby všechny formulářové prvky měly přiřazené popisky. Splnění těchto pokynů zajišťuje, že váš web je přístupný a v mnoha jurisdikcích legálně v souladu se zákony.
• SEO: Ačkoli se nejedná o přímý faktor pro hodnocení, přístupné webové stránky mívají lepší uživatelskou zkušenost, což může nepřímo zlepšit výkon SEO.

Porozumění požadavkům WCAG na popisky formulářů

WCAG poskytuje specifické pokyny pro zajištění přístupnosti formulářů. Zde jsou klíčové požadavky týkající se popisků formulářů:

WCAG 2.1 Kritérium úspěšnosti 1.1.1 Netextový obsah (Úroveň A)

Ačkoli se toto kritérium přímo netýká popisků, zdůrazňuje důležitost poskytování textových alternativ pro veškerý netextový obsah, včetně CAPTCHA a obrázků použitých ve formulářích. Správně popsaný formulář je klíčový pro poskytnutí kontextu k těmto alternativám.

WCAG 2.1 Kritérium úspěšnosti 1.3.1 Informace a vztahy (Úroveň A)

Informace, struktura a vztahy sdělované prostřednictvím prezentace by měly být programově určitelné nebo dostupné v textu. To znamená, že vztah mezi popiskem a jeho odpovídajícím vstupním polem musí být explicitně definován v HTML kódu.

WCAG 2.1 Kritérium úspěšnosti 2.4.6 Nadpisy a popisky (Úroveň AA)

Nadpisy a popisky popisují téma nebo účel. Popisky formulářů poskytují popisný kontext pro vstupní pole, což uživatelům usnadňuje pochopení struktury formuláře a jeho přesné vyplnění.

WCAG 2.1 Kritérium úspěšnosti 3.3.2 Popisky nebo instrukce (Úroveň A)

Popisky nebo instrukce se poskytují, když obsah vyžaduje vstup od uživatele.

WCAG 2.1 Kritérium úspěšnosti 4.1.2 Název, role, hodnota (Úroveň A)

U všech komponent uživatelského rozhraní (včetně, ale nejen, formulářových prvků, odkazů a komponent generovaných skripty) lze název a roli programově určit; stavy, vlastnosti a hodnoty, které může uživatel nastavit, lze nastavit programově; a oznámení o změnách těchto položek je k dispozici uživatelským agentům, včetně asistivních technologií.

Osvědčené postupy pro implementaci přístupných popisků formulářů

Zde je několik osvědčených postupů pro vytváření přístupných popisků formulářů:

1. Používejte element <label>

Element <label> je primárním způsobem, jak přiřadit textový popisek k vstupnímu poli. Poskytuje sémantické a strukturální spojení mezi popiskem a ovládacím prvkem. Atribut for elementu <label> by měl odpovídat atributu id odpovídajícího vstupního pole.

Příklad:

<label for="name">Jméno:</label>
<input type="text" id="name" name="name">

Nesprávný příklad (vyhněte se):

<span>Jméno:</span>
<input type="text" id="name" name="name">

Použití elementu span namísto label nevytváří nezbytné programové propojení, což jej činí nepřístupným pro čtečky obrazovky.

2. Explicitně přiřazujte popisky k vstupním polím

Zajistěte jasné a explicitní propojení mezi popiskem a vstupním polem pomocí atributů for a id, jak je ukázáno v příkladu výše.

3. Umisťujte popisky správně

Umístění popisků může ovlivnit použitelnost. Obecně by měly být popisky umístěny:

• Nad vstupním polem: To je často nejpřístupnější a nejpřívětivější možnost, zejména pro textová pole a textové oblasti.
• Vlevo od vstupního pole: Běžné, ale může být méně efektivní pro uživatele se zrakovým postižením, kteří mohou mít potíže s prohledáváním stránky.
• U přepínačů (radio buttons) a zaškrtávacích políček (checkboxes): Popisky by měly být umístěny vpravo od ovládacího prvku.

Při umisťování popisků zvažte kulturní zvyklosti. V některých jazycích se popisky tradičně umisťují za vstupní pole. Přizpůsobte svůj design tak, aby vyhovoval těmto preferencím.

4. Poskytujte jasné a stručné popisky

Popisky by měly být stručné, popisné a snadno srozumitelné. Vyhněte se žargonu nebo technickým termínům, které by mohly uživatele zmást. Například místo „UserID“ použijte „Uživatelské jméno“ nebo „E-mailová adresa“. Zvažte lokalizaci. Zajistěte, aby vaše popisky byly snadno přeložitelné do různých jazyků a zároveň si zachovaly svůj význam.

5. V případě potřeby používejte atributy ARIA

Atributy ARIA (Accessible Rich Internet Applications) mohou zlepšit přístupnost formulářových prvků, zejména ve složitých scénářích. Používejte však ARIA uvážlivě a pouze tehdy, když nativní HTML elementy a atributy nestačí.

• aria-label: Tento atribut použijte k poskytnutí popisku, když viditelný popisek není možný nebo praktický.
• aria-labelledby: Tento atribut použijte k odkazu na ID existujícího prvku na stránce, který má sloužit jako popisek.
• aria-describedby: Tento atribut použijte k poskytnutí dodatečných informací nebo instrukcí pro vstupní pole. To je užitečné pro poskytnutí kontextu nebo vysvětlení validačních pravidel.

Příklad použití aria-label:

<input type="search" aria-label="Prohledat webovou stránku">

Příklad použití aria-labelledby:

<h2 id="newsletter-title">Odběr novinek</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Zadejte vaši e-mailovou adresu">

6. Seskupujte související formulářové prvky pomocí <fieldset> a <legend>

Element <fieldset> seskupuje související formulářové prvky a element <legend> poskytuje nadpis pro tuto skupinu. To zlepšuje strukturu formuláře a usnadňuje uživatelům pochopení vztahů mezi různými vstupními poli.

Příklad:

<fieldset>
  <legend>Kontaktní informace</legend>
  <label for="name">Jméno:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Poskytujte jasné chybové zprávy

Když uživatelé udělají chybu při vyplňování formuláře, poskytněte jasné a informativní chybové zprávy, které vysvětlí, co se stalo špatně a jak chybu opravit. Přiřaďte tyto chybové zprávy k odpovídajícím vstupním polím pomocí atributů ARIA, jako je aria-describedby.

Příklad:

<label for="email">E-mail:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Zadejte prosím platnou e-mailovou adresu.</span>

Zajistěte, aby byla chybová zpráva vizuálně odlišitelná (např. pomocí barvy nebo ikon) a programově přístupná pro asistivní technologie.

8. Používejte dostatečný barevný kontrast

Zajistěte dostatečný barevný kontrast mezi textem popisku a barvou pozadí, aby byly splněny požadavky WCAG. Použijte nástroj pro analýzu barevného kontrastu k ověření, že kontrastní poměr splňuje minimální požadavky (4.5:1 pro normální text a 3:1 pro velký text). To pomáhá uživatelům se slabým zrakem lépe číst popisky.

9. Zajistěte přístupnost z klávesnice

Všechny formulářové prvky by měly být přístupné pouze pomocí klávesnice. Uživatelé by měli být schopni procházet formulářem pomocí klávesy Tab a interagovat s formulářovými prvky pomocí mezerníku nebo klávesy Enter. Důkladně otestujte své formuláře pomocí klávesnice, abyste zajistili správnou přístupnost.

10. Testujte s asistivními technologiemi

Nejlepším způsobem, jak zajistit přístupnost vašich formulářů, je testovat je s asistivními technologiemi, jako jsou čtečky obrazovky (např. NVDA, JAWS, VoiceOver). To vám pomůže identifikovat jakékoli problémy s přístupností, které nemusí být zjevné při vizuální kontrole. Zapojte do svého testovacího procesu uživatele se zdravotním postižením, abyste získali cennou zpětnou vazbu.

Příklady implementace přístupných popisků formulářů

Příklad 1: Jednoduchý kontaktní formulář (mezinárodní perspektiva)

Zvažte kontaktní formulář pro globální publikum. Popisky by měly být jasné, stručné a snadno přeložitelné.

<form>
  <label for="name">Celé jméno:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-mailová adresa:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Země:</label>
  <select id="country" name="country">
    <option value="">Vyberte zemi</option>
    <option value="us">Spojené státy</option>
    <option value="ca">Kanada</option>
    <option value="uk">Spojené království</option>
    <option value="de">Německo</option>
    <option value="fr">Francie</option>
    <option value="jp">Japonsko</option>
    <option value="au">Austrálie</option>
    <!-- Přidejte další země -->
  </select><br><br>

  <label for="message">Zpráva:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Odeslat">
</form>

Všimněte si použití „Celé jméno“ místo pouhého „Jméno“ pro srozumitelnost, zejména pro kultury, kde příjmení předchází křestnímu jménu.

Příklad 2: Formulář pro placení v e-shopu

Formuláře pro placení v e-shopech často vyžadují citlivé informace. Jasné popisky a instrukce jsou klíčové pro budování důvěry a zajištění přístupnosti.

<form>
  <fieldset>
    <legend>Doručovací adresa</legend>
    <label for="shipping_name">Celé jméno:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Adresa:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Město:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">PSČ/Zip kód:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Země:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Vyberte zemi</option>
      <option value="us">Spojené státy</option>
      <option value="ca">Kanada</option>
      <!-- Přidejte další země -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Platební údaje</legend>
    <label for="card_number">Číslo kreditní karty:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Datum expirace (MM/RR):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/RR"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Objednat">
</form>

Použití fieldsetů a legend jasně organizuje formulář do logických sekcí. Pomocný text (placeholder) poskytuje další vodítko, ale pamatujte, že by neměl být používán jako náhrada za popisky.

Příklad 3: Registrační formulář s atributy ARIA

Zvažte registrační formulář, kde je přezdívka volitelná. Pomocí atributů ARIA můžeme poskytnout další kontext.

<form>
  <label for="username">Uživatelské jméno:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Heslo:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Přezdívka (nepovinné):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Tato přezdívka bude zobrazena veřejně.</span><br><br>

  <input type="submit" value="Registrovat">
</form>

Atribut aria-describedby propojuje vstupní pole pro přezdívku s elementem span, který poskytuje další informace o tom, jak bude přezdívka použita.

Nástroje pro testování přístupnosti formulářů

Několik nástrojů vám může pomoci vyhodnotit přístupnost vašich formulářů:

• Accessibility Insights: Rozšíření prohlížeče, které identifikuje problémy s přístupností na webových stránkách.
• WAVE (Web Accessibility Evaluation Tool): Online nástroj, který vyhodnocuje webové stránky z hlediska chyb v přístupnosti.
• axe DevTools: Rozšíření prohlížeče, které provádí automatizované testování přístupnosti.
• Čtečky obrazovky (NVDA, JAWS, VoiceOver): Testování pomocí čteček obrazovky je nezbytné pro identifikaci problémů s přístupností, které nemusí být zjevné při automatizovaném testování.

Závěr

Přístupné popisky formulářů jsou nezbytné pro vytváření inkluzivních webových zážitků. Dodržováním osvědčených postupů uvedených v tomto průvodci můžete zajistit, že vaše formuláře bude moci používat každý bez ohledu na své schopnosti. Upřednostňování přístupnosti nejenže prospívá uživatelům se zdravotním postižením, ale také zlepšuje celkovou použitelnost vašeho webu pro všechny uživatele. Nezapomínejte pravidelně testovat své formuláře s asistivními technologiemi a zapojovat do testovacího procesu uživatele se zdravotním postižením, abyste získali cennou zpětnou vazbu a neustále zlepšovali přístupnost svého webu.

Přijetí přístupnosti není jen otázkou dodržování předpisů; je to o vytváření inkluzivnějšího a spravedlivějšího webu pro všechny. Investicí do přístupného designu formulářů prokazujete svůj závazek k inkluzivitě a vytváříte lepší uživatelskou zkušenost pro všechny.